包裹|详情_Webpack中使用sourcemap在开发过程中进行调试

篇首语：本文由编程笔记#小编为大家整理，主要介绍了Webpack 中使用source map 在开发过程中进行调试相关的知识，希望对你有一定的参考价值。

我们都知道webpack在打包的时候会将源代码打包成一个bundle文件&＃xff0c;bundle文件就是经过了loader转换&＃xff0c;还有webpack的一些插件处理&＃xff0c;以及webpack构建过程中的一些转换&＃xff0c;最后会生成一个大的JS文件&＃xff0c;直接去看这个文件是没法调试的。

source map是在开发过程中的一个利期&＃xff0c;通过它我们在调试的时候可以定位到源代码&＃xff0c;阮一峰老师的 Javascript Source Map 详解写的比较详情细&＃xff0c;大家可以去看看。source map一般是在开发环境开启&＃xff0c;而在线上环境关闭&＃xff0c;否则会暴露业务逻辑&＃xff0c;非常不安全。在排查线上问题时可以将source map 上传到错误监控系统里面&＃xff0c;以此来排查一些错误问题。

1. source map 关键字

1. eval&＃xff1a;使⽤eval包裹模块代码&＃xff1b;

2. source map&＃xff1a;产⽣.map⽂件&＃xff1b;

3.cheap&＃xff1a;不包含列信息&＃xff1b;

4. inline&＃xff1a;将.map作为DataURI嵌⼊&＃xff0c;不单独⽣成.map⽂件&＃xff1b;

5. module&＃xff1a;包含loader的source map&＃xff1b;

2. source map 类型

source map的类型是可以根据关键字进行一个排列组合得到不同的类型。

3. source map的用法

module.exports &＃61;
entry: &＃39;./src/index.js&＃39;,
output:
path: path.join(__dirname, &＃39;dist&＃39;),
filename: &＃39;[name].js&＃39;
,
mode: &＃39;development&＃39;,
// 配置source-map类型
devtool: &＃39;source-map&＃39;
;